<template>
    <div>
        <div class="file-hover right_nav flex flex_column_center">
            <div class="right_nav_content" :style="bgcolor">
                <a @click="handelclick" class="black">
                    <i class=" iconfont icon-xiazai"></i>
                    <p>资料<br>下载</p>
                </a>
                <a href="javascript:;" class="black weixin" :style="bglicolor" @mouseenter="scancodeshow()"
                    @mouseleave="scancodehide()">
                    <i class=" iconfont icon-erweima"></i>
                    <p>微信<br>公众号</p>
                    <div class="mask" :style="bgcolor" ref="scancode" style="display: none; opacity: 1;">
                        <div class="picture_container">
                            <img src="@/static/scancode/wechat.png" title="微信公众号" alt="微信公众号">
                        </div>
                    </div>
                </a>

                <a href="http://wpa.qq.com/msgrd?v=3&amp;uin=3210177898&amp;site=qq&amp;menu=yes"
                    @mouseenter="wechatshow()" @mouseleave="wechathide()" target="_blank" rel="noopener noreferrer"
                    class="black weixin" :style="bglicolor">
                    <i class=" iconfont icon-dianhua1"></i>
                    <p>微信<br>客服</p>
                    <div class="mask" :style="bgcolor" ref="wechatcode" style="display: none; opacity: 1;">
                        <div class="picture_container">
                            <img src="@/static/scancode/code.png" title="微信公众号" alt="微信公众号">
                        </div>
                    </div>
                </a>
                <div class="black go_top" title="Top" onclick="javascript:window.scrollTo(0,0)" :style="bglicolor">
                    <i class=" iconfont icon-huidaodingbu"></i>

                    <p>返回<br>顶部</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'file-hover',
    data() {
        return {
            bgcolor: {},
            bglicolor: {}
        }
    },
    mounted() {
        this.init()
    },
    watch: {
        '$route.path': function (val) {
            if (val == '/column') {
                this.bgcolor = {
                    backgroundColor: "rgb(128, 34, 34)",
                    borderTop: 'unset'
                }
                this.bglicolor = {
                    borderTop: 'unset'
                }

            } else {
                this.bgcolor = {

                },
                    this.bglicolor = {
                    }
            }
        }
    },
    methods: {
        init() {
            let theme = localStorage.getItem('theme')
            if (theme == 'red') {
                this.bgcolor = {
                    backgroundColor: "rgb(128, 34, 34)",
                    borderTop: 'unset'
                }
                this.bglicolor = {

                    borderTop: 'unset'
                }


            } else {
                this.bgcolor = {

                },
                    this.bglicolor = {
                    }
            }



        },
        scancodeshow() {
            this.$refs.scancode.style.display = 'block'
        },
        scancodehide() {
            this.$refs.scancode.style.display = 'none'
        },
        wechatshow() {
            this.$refs.wechatcode.style.display = 'block'
        },
        wechathide() {
            this.$refs.wechatcode.style.display = 'none'
        },


        handelclick() {
            this.$router.push({
                path: '/fileDown'
            })
        }
    }
}
</script>
<style scoped>
.right_nav .right_nav_content {}
</style>